<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Cost' }">费用类目</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/OtherCost' }">其他收付款</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/DischargeSettlement' }">出院结算</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/OccupancyFee' }">入住缴费</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-button type="primary" @click="openAddConsulterDialog">创建其他收付款</el-button>
      </el-col>
      <el-col :span="8">
        <el-input placeholder="请输入类别名称" clearable v-model="cname" @clear="search">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table
        :data="consulterList"
        :row-class-name="tableRowClassName"
        style="width: 100%;text-align: center">
      <el-table-column label="编号" type="index" align="center"></el-table-column>
      <el-table-column
          prop="category"
          label="类别"
          align="center">
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期"
          align="center">
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 1">收入</span>
          <span v-else-if="scope.row.type === 2">支出</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="price"
          label="金额"
          align="center">
      </el-table-column>
      <el-table-column
          prop="notes"
          label="备注"
          align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="openEdit(scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6 , 12, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>

    <!--    添加咨询者-->
    <el-dialog title="添加其他收付款" :visible.sync="addConsulterDialogVisible"
               width="50%" @close="addConsulterFormClose" :close-on-click-modal="false">
      <el-form
          :model="addConsulterForm"
          :rules="addConsulterFormRules"
          ref="addConsulterFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="类型" prop="type">
          <el-select  @change="handleChange(addConsulterForm.type)" v-model="addConsulterForm.type" placeholder="请选择类目">
            <el-option v-for="t in type" :label="t.name" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类别" prop="category">
          <el-select v-model="category.category" placeholder="请选择类别">
            <el-option label="请选择" :value="0"></el-option>
            <el-option v-for="t in category" :label="t.category" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker
              v-model="addConsulterForm.date"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="金额" prop="price">
          <el-input v-model="addConsulterForm.price" placeholder="请输入金额"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input v-model="addConsulterForm.notes" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addConsulter">保 存</el-button>
        <el-button @click="addConsulterFormClose">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 修改咨询者   -->
    <el-dialog title="修改类别" :visible.sync="updateConsulterDialogVisible"
               width="50%" @close="updateConsulterFormClose" :close-on-click-modal="false">
      <el-form
          :model="updateConsulterForm"
          :rules="updateConsulterFormRules"
          ref="updateConsulterFormRef"
          label-width="100px"
          class="demo-ruleForm"
      > <el-form-item label="类型" prop="type">
        <el-select @change="handleChange(updateConsulterForm.type)" v-model="updateConsulterForm.type" placeholder="请选择类目">
          <el-option v-for="t in type" :label="t.name" :value="t.id"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="类别" prop="category">
          <el-select v-model="updateConsulterForm.category" placeholder="请选择类别">
            <el-option label="请选择" value="0"></el-option>
            <el-option v-for="t in category" :label="t.category" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker
              v-model="updateConsulterForm.date"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="金额" prop="price">
          <el-input v-model="updateConsulterForm.price" placeholder="请输入金额"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input v-model="updateConsulterForm.notes" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateConsulter">确 定</el-button>
        <el-button @click="updateConsulterFormClose">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      type:[
          {id:1,name:"收入"},
          {id:2,name:"支出"}
      ],
      category:{},
      consulterList:[],
      pageNum: 1,
      pageSize:6,
      total:9,
      cname:'',
      consulter:{},
      addConsulterDialogVisible:false,
      addConsulterForm:{
        type:'',
        date:'',
        category:'',
        name:'',
        price:'',
        notes:''
      },
      addConsulterFormRules:{
        category: { required: true, message: "请选择类别", trigger: "blur" },
        name: { required: true, message: "请选择类型", trigger: "blur"},
        price: { required: true, message: "请输入价格", trigger: "blur"},
        type: { required: true, message: "请选择类型", trigger: "blur"},
        date: { required: true, message: "请选择时间", trigger: "blur"},

      },
      updateConsulterDialogVisible:false,
      updateConsulterForm:{
        id:'',
        type:'',
        date:'',
        category: '',
        name:'',
        price:'',
        notes:''
      },
      updateConsulterFormRules:{
        category: { required: true, message: "请选择类别", trigger: "blur" },
        name: { required: true, message: "请选择类型", trigger: "blur"},
        price: { required: true, message: "请输入价格", trigger: "blur"},
        type: { required: true, message: "请选择类型", trigger: "blur"},
        date: { required: true, message: "请选择时间", trigger: "blur"},

      },
    }
  },
  methods:{
    handleChange(id){
      this.category={}
      this.$set(this.updateConsulterForm, 'category', '');
      let url = '/categoryType/selectById/'+id
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.category=res.data.data
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex === 0) {
        return 'white-row'; // 第一行为白色
      } else if (rowIndex % 4 === 1) {
        return 'warning-row'; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 2 === 0) {
        return ''; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 3 === 2) {
        return 'white-row'; // 第三行和每隔三行后的行为白色
      } else {
        return 'success-row'; // 每隔三行后的行为黄色
      }
    },
    //增加
    openAddConsulterDialog(){
      this.addConsulterForm = {};
      this.category={}
      this.addConsulterDialogVisible = true;
    },
    addConsulterFormClose(){
      this.addConsulterForm = {};
      this.addConsulterDialogVisible = false;
    },
    addConsulter(){
      this.addConsulterForm.category=this.category.category
      // console.log(this.category.category)
      let url = "/otherCost/insertOtherCost";
      this.$refs.addConsulterFormRef.validate((val)=>{
        if(val){
          this.$axios.post(url,this.addConsulterForm).then((res)=>{
            if(res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.addConsulterDialogVisible = false;
              this.initConsulterData();
            }else {
              this.$message({
                message: res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        }else {
          alert("请完善信息")
        }
      })
    },
    //修改
    openEdit(consulter){
      let id=consulter.type
      let url = '/categoryType/selectById/'+id
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.category=res.data.data
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
      this.updateConsulterForm.id=consulter.id
      this.updateConsulterForm.type=consulter.type
      this.updateConsulterForm.date = consulter.date;
      // this.updateConsulterForm.name = consulter.name;
      this.updateConsulterForm.category = consulter.category;
      this.updateConsulterForm.price = consulter.price;
      this.updateConsulterForm.notes = consulter.notes;
      this.updateConsulterDialogVisible = true;
      console.log(this.updateConsulterForm)
    },
    updateConsulterFormClose(){

      this.updateConsulterDialogVisible = false;
    },
    updateConsulter(){
      console.log(this.updateConsulterForm)
      let url = "/otherCost/updateOtherCost";
      this.$refs.updateConsulterFormRef.validate((val)=>{
        if(val){
          this.$axios.post(url,this.updateConsulterForm).then((res)=>{
            if(res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.updateConsulterDialogVisible = false;
              this.initConsulterData();
            }else {
              this.$message({
                message: res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        }else {
          alert("请完善信息")
        }
      })
    },
    handleDelete(consulter){
      //console.log(consulter)
      let  id=consulter.id
      this.$confirm("你确定要删除此记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/otherCost/deleteOtherCost/'+id
        this.$axios.get(url).then((res)=>{
          if(res.data.code == 200){
            this.$message({
              message: res.data.msg,
              type:'success',
              duration:1000
            });
            this.initConsulterData();
          }else {
            this.$message({
              message: res.data.msg,
              type:'error',
              duration:1000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })

    },
    search() {
      this.pageNum = 1;
      this.initConsulterData();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNum = 1;
      this.initConsulterData();
    },
    handleCurrentChange(newPage) {
      //alert(newPage);
      this.pageNum = newPage;
      this.initConsulterData();
    },
    initConsulterData(){
      let url = "/otherCost/selectOtherCost?now="+this.pageNum+"&size="+this.pageSize+"&cname="+this.cname;
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.consulterList = res.data.data.list;
          this.total = res.data.data.total;
          //console.log(this.consulterList)
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    initCategory(){
      let url = "/category/selectCategory"
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.category=res.data.data
          // console.log(this.category)
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    }
  },
  created() {
    this.initConsulterData();
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>